<template>
<div class="safety">
  <h3>登录认证方式</h3>
  <el-row class="safety-content" style="margin-bottom: 25px">
    <p class="layout-mart">说明:<br/>如果同时配置了ip和邮件的认证，优先ip认证, 如果IP认证失败, 才发送邮件;ip认证成功, 则直接登录。</p>
      <div class="layout-mart">
        <el-checkbox v-model="ipCheck">IP认证</el-checkbox>
        <div class="ip-form">
          <div class="tip">只能从如下指定的IP才能登录系统</div>
          <div class="input-wapper">
             <el-input v-model="ips[0].ip" ></el-input>
             <span class="push" @click.stop="addIp"><i class="el-icon-plus"></i></span>
          </div>
          <div class="input-wapper" v-if="index>0" v-for="(item, index) in ips">
              <el-input v-model="item.ip"></el-input>
              <span class="push del"  @click.stop="delIp(index)"><i class="el-icon-minus"></i></span>
          </div>
        </div>
      </div>
      <div class="layout-mart">
          <el-checkbox v-model="emailCheck">邮箱认证</el-checkbox>
          <div class="email-tip tip">启用后会向座席邮箱发送验证码,输入验证码方可登录</div>
      </div>
      <div class="layout-mart">
        <el-button type="primary" class="primary_btn" @click.native.prevent="submit">{{$t('public.save')}}</el-button>
      </div>
  </el-row>
  <div class="safy_config">
    <h3>信息安全设置</h3>
    <el-form ref="form1" :model="form1" style="margin-left: 30px">
      <el-form-item label="开启水印">
        <el-radio-group v-model="form1.watermark">
          <el-radio :label="true">是</el-radio>
          <el-radio :label="false">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="form1.watermark">请选择需要展示的水印的内容</div>
      <el-form-item :label="''" v-if="form1.watermark">
        <el-checkbox-group v-model="form1.content">
          <el-checkbox label="name">姓名</el-checkbox>
          <el-checkbox label="jobNumber">工号</el-checkbox>
          <el-checkbox label="mobile">手机号</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <div class="layout-mart">
        <el-button type="primary" class="primary_btn" @click.native.prevent="submit1">{{$t('public.save')}}</el-button>
      </div>
    </el-form>
  </div>
</div>
</template>
<script>
  export default {
    name: 'SafetyConfig',
    data () {
      return {
        form1: {
          content: [],
          watermark: false
        },
        ipCheck: false,
        emailCheck: false,
        ips: [{ip: ''}],
        form: {ipCheck: false, ips: [], emailCheck: false}
      }
    },
    computed: {
      account () {
        let temp = this.$store.state.session.account || {}
        let ips = [{ip: ''}]
        if (temp.ips && temp.ips.length > 0) {
          ips = temp.ips.map(val => {
            return {
              ip: val
            }
          })
        }
        return {
          watermark: temp.watermark || false,
          content: temp.content || [],
          ipCheck: temp.ipCheck || false,
          emailCheck: temp.emailCheck || false,
          ips
        }
      }
    },
    methods: {
      addIp () {
        this.ips.push({ip: ''})
      },
      delIp (index) {
        this.ips.splice(index, 1)
      },
      checkIP (ip) {
        let reg = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/
        if (reg.test(ip)) {
          if (RegExp.$1 < 256 && RegExp.$2 < 256 && RegExp.$3 < 256 && RegExp.$4 < 256) {
            return true
          } else {
            return false
          }
        }
      },

      submit () {
        let ips = this.ips.map(val => {
          return val && val.ip
        }).filter(Boolean)
        if (this.ipCheck) {
          if (ips.length === 0) {
            this.$message.error('ip地址必须填写')
            return null
          } else {
            let isIp = false
            ips.forEach(item => {
              if (!this.checkIP(item)) {
                isIp = true
              }
            })
            if (isIp) {
              this.$message.error('请输入正确的IP地址')
              return null
            }
          }
        }
        let data = {
          ipCheck: this.ipCheck,
          ips,
          emailCheck: this.emailCheck
        }
        this.$store.dispatch('saveLoginCheck', data).then(() => {
          // account更新后，再init
          this.$nextTick(() => {
            this.init()
          })
          this.$message.success('设置成功')
        })
      },
      submit1 () {
        if (!this.form1.watermark) {
          this.form1.content = []
        }
        let data = {
          watermark: this.form1.watermark,
          content: this.form1.content
        }
        if (this.form1.watermark && this.form1.content.length === 0) {
          this.$message.error('请至少选择一项水印内容！')
          return false
        }
        this.$store.dispatch('saveLoginCheck', data).then(() => {
          // account更新后，再init
          this.$nextTick(() => {
            this.init()
          })
          this.$message.success('设置成功')
        })
      },
      init () {
        console.log(this.account)
        this.ipCheck = this.account.ipCheck
        this.emailCheck = this.account.emailCheck
        this.form1.content = this.account.content || []
        this.form1.watermark = this.account.watermark || false
        window.sessionStorage.setItem('ipCheck', this.ipCheck)
        window.sessionStorage.setItem('emailCheck', this.emailCheck)
        let ips = this.account.ips.map(val => {
          return {
            ip: val.ip
          }
        })
        this.$set(this, 'ips', ips)
      }
    },
    beforeMount () {
      this.init()
    }
  }
</script>
<style lang="stylus" scoped>
@import "../../../../assets/common.styl"
.safety
   height calc(100vh - 130px)
   padding 20px
   overflow auto
.safety-content
  margin-left 24px
  .layout-mart
    margin-top 14px
  p.layout-mart
    color $c-prompt
.ip-form,
.email-tip
  margin 14px 0 0 30px
.input-wapper
  display flex
  align-items center
  margin-top 14px
  width 300px
  span
    margin-left 6px
    cursor pointer
  .push
    color $c-main
  .del
    color $c-pink
.tip
  font-size 12px
.primary_btn
  float left
.safy_config
  margin-top: 20px;
  padding-top: 10px;
  clear: both;
  border-top: 1px dashed #ccc
</style>
